<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF 红色去除工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        .slider-container {
            margin-bottom: 20px;
        }
        .slider-container label {
            display: block;
            margin-bottom: 5px;
        }
        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #f3f3f3;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .progress-bar-inner {
            height: 100%;
            background-color: #4caf50;
            width: 0%;
            transition: width 0.3s ease;
        }
        .step-info {
            margin-bottom: 20px;
            font-size: 16px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>PDF 红色去除工具</h1>

        <!-- 文件选择 -->
        <input type="file" id="fileInput" accept=".pdf" style="display: none;">
        <button onclick="document.getElementById('fileInput').click()">选择 PDF 文件</button>

        <!-- 阈值设置 -->
        <div class="slider-container">
            <label for="redThreshold">红色阈值: <span id="redValue">200</span></label>
            <input type="range" id="redThreshold" min="0" max="255" value="200" oninput="updateThreshold('red', this.value)">
        </div>
        <div class="slider-container">
            <label for="greenThreshold">绿色阈值: <span id="greenValue">100</span></label>
            <input type="range" id="greenThreshold" min="0" max="255" value="100" oninput="updateThreshold('green', this.value)">
        </div>
        <div class="slider-container">
            <label for="blueThreshold">蓝色阈值: <span id="blueValue">100</span></label>
            <input type="range" id="blueThreshold" min="0" max="255" value="100" oninput="updateThreshold('blue', this.value)">
        </div>

        <!-- 处理按钮 -->
        <button onclick="processPDF()" id="processButton">处理 PDF 文件</button>

        <!-- 进度条 -->
        <div class="progress-bar">
            <div class="progress-bar-inner" id="progressBar"></div>
        </div>

        <!-- 当前步骤信息 -->
        <div class="step-info" id="stepInfo"></div>
    </div>

    <script>
        // 阈值变量
        let redThreshold = 200;
        let greenThreshold = 100;
        let blueThreshold = 100;

        // 更新阈值
        function updateThreshold(type, value) {
            if (type === 'red') {
                redThreshold = parseInt(value);
                document.getElementById('redValue').textContent = value;
            } else if (type === 'green') {
                greenThreshold = parseInt(value);
                document.getElementById('greenValue').textContent = value;
            } else if (type === 'blue') {
                blueThreshold = parseInt(value);
                document.getElementById('blueValue').textContent = value;
            }
        }

        // 模拟处理 PDF
        function processPDF() {
            const fileInput = document.getElementById('fileInput');
            if (fileInput.files.length === 0) {
                alert('请先选择 PDF 文件');
                return;
            }

            const file = fileInput.files[0];
            const processButton = document.getElementById('processButton');
            const progressBar = document.getElementById('progressBar');
            const stepInfo = document.getElementById('stepInfo');

            // 禁用按钮
            processButton.disabled = true;
            processButton.textContent = '处理中...';

            // 模拟处理进度
            let progress = 0;
            const interval = setInterval(() => {
                progress += 10;
                progressBar.style.width = progress + '%';

                if (progress >= 100) {
                    clearInterval(interval);
                    processButton.disabled = false;
                    processButton.textContent = '处理 PDF 文件';
                    stepInfo.textContent = '处理完成！';
                    alert('PDF 处理完成！');
                } else {
                    stepInfo.textContent = `正在处理... (${progress}%)`;
                }
            }, 300);
        }

        // 文件选择事件
        document.getElementById('fileInput').addEventListener('change', function (event) {
            const file = event.target.files[0];
            if (file) {
                alert(`已选择文件: ${file.name}`);
            }
        });
    </script>
</body>
</html>